<template>
  <div class="course_shwo_view">
       <div class="course_card" v-for="courseInfo in courseInfos" :key="courseInfo.courseId">
            <img :src="courseInfo.courseImgUrl" alt="" class="course_img">
            <div class="course_font_info">课程名： {{courseInfo.courseName}}</div>
            <div class="card_bottom_btn">
                <el-button  icon="el-icon-delete" round @click="delTheCourse(courseInfo.courseId)">关闭课程</el-button>
                <el-button  round   @click="toCourseInfo(courseInfo.courseId)"><i class="el-icon-edit"></i> 进入课程</el-button>
            </div>
      </div>

  </div>
</template>

<script>
import * as API from '../../api/course/index'
import {Storage} from '../../storage'

export default {
    data() {
        return {
            courseInfos:[],
        }
    },
    methods: {
        toCourseInfo(courseId) {
            Storage.set("courseId", courseId, 60 * 60 * 1000)
            this.$router.push({
                name: "CourseInfo",
                params:{
                    courseId
                }
            })
        },
        getMyCouses() {
            API.getMyCourse().then(res => {
                let data = res.data
                this.courseInfos = data.courses;

            }).catch(err => {
                this.$message.error('网络错误')
            }) 
        },
        delTheCourse(courseId) {
            this.$confirm('此操作将删除该课程, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    API.deleteTheCourse(courseId).then(res => {
                        if(res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getMyCouses()
                        }else {
                            this.$message({
                                type: 'error',
                                message: '删除失败'
                            });     
                        }
                    })
                    
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
            });
        }
    },
    mounted() {
        this.getMyCouses()
    }

}
</script>

<style>
.course_shwo_view {
    margin: 1% 3%;
    display: flex;
    width: 96%;
    min-height: 1000px;

    flex-wrap: wrap;
    align-content: flex-start;
}


.course_card {
  margin: 2% 1.5%;
  /* width: 260px; */
  width: 270px;
  /* width: 290px; */
  min-height: 262px;
  /* max-height: 280px; */
  border-radius: 15px;
  overflow: hidden;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 13%);
  /* position: relative; */

}

.course_font_info {
  /* margin: 1% 0% 1% 2%; */
  margin-right: 2%;
  margin-left: 3%;
  width: 95%;
  height: 22.77px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.course_img {
  width: 100%;
  height: 152px;
}

.card_bottom_btn {
  margin-top: 5%;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

</style>